import React from 'react'
import { List } from 'antd-mobile';
import { ListWrapper } from './style'

const ContentList = ({contents}) => {
    return (
        <div>
            { contents[0] !== 7 &&
                <List style={{"marginBottom": "2.3rem"}}>
                    {contents.map(({ img, text, date, pos, price,id }) => {
                        return (
                            <List.Item key={id}>
                                <ListWrapper>
                                    <img src={img} />
                                    <div className='list-content'>
                                        <p>{text}</p>
                                        <p>{date}</p>
                                        <p>{pos}</p>
                                        <div><span>售票中</span>{price}</div>
                                    </div>
                                </ListWrapper>
                            </List.Item>
                        )
                    })}
                </List>
            }
        </div>
    )
}

export default ContentList